<template>
	<view class="images" :class="imgClass">
		<template v-if="pic_list.length!==0">
			<view class="image" v-for="(img,imgIndex) in pic_list" :key="imgIndex"
				@click.stop="previewImage(img[keyName])">
				<LazyLoad :src="img[keyName]" width='100%' height='100%' mode="aspectFill"></LazyLoad>
			</view>
		</template>
		<template v-if="video_list.length!==0">
			<view class="image" v-for="(img,imgIndex) in video_list" :key="img.cover">
				<view class="player">
					<LazyLoad :src="img.cover" width='100%' height='100%'></LazyLoad>
				</view>
			</view>
		</template>
	</view>

</template>

<script>
	import LazyLoad from '../../LazyLoad/LazyLoad.vue'
	export default {
		components: {
			LazyLoad
		},
		props: {
			pic_list: {
				type: Array,
				default: () => []
			},
			video_list: {
				type: Array,
				default: () => []
			},
			keyName: {
				type: String,
				default: () => 'img'
			}
		},
		data() {
			return {
				imgClass: ''
			};
		},
		methods: {
			getImgSize(url) {
				return new Promise((resolve, reject) => {
					uni.getImageInfo({
						src: url,
						success: (imgObj) => {
							resolve({
								width: imgObj.width,
								height: imgObj.height
							})
						},
						fail(err) {
							reject('err')
						}
					});
				})
			},
			previewImage(img) {
				let list = []
				list.push(img)
				uni.previewImage({
					current: 0,
					urls: list,
					loop: false,
				})
			}
		},
		computed: {
			len() {
				return this.pic_list.length + this.video_list.length
			}
		},
		async mounted() {
			if (this.len == 1) {
				if (this.pic_list.length !== 0) {
					let imgSize = await this.getImgSize(this.pic_list[0][this.keyName])
					let w = imgSize.width
					let h = imgSize.height
					let name = ''
					let l = w / h
					l > 1 ? name = "horizontal" : 1 == l ? name = "square" : l < 1 && (name =
						"vertical")
					this.imgClass = name
				} else if (this.video_list.length !== 0) {
					let imgSize = await this.getImgSize(this.video_list[0].cover)
					let w = imgSize.width
					let h = imgSize.height
					let name = ''
					let l = w / h
					l > 1 ? name = "horizontal" : 1 == l ? name = "square" : l < 1 && (name =
						"vertical")
					this.imgClass = name
				}
			}
			if (this.len == 2) {
				this.imgClass = 'showTwo'
			}
			if (this.len == 4) {
				this.imgClass = 'showFour'
			}
			if (this.len >= 6) {
				this.imgClass = 'showSix'
			}
		},

	}
</script>

<style scoped lang="scss">
	.images {
		margin-top: 0.2rem;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		border-radius: .14rem;
		height: 2.21rem;
		overflow: hidden;
		position: relative;

		.image {
			width: 33%;
			height: 2.21rem;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}

			.player {
				width: 100%;
				height: 100%;
				position: relative;

				image {
					width: 100%;
					height: 100%;
				}

				&:after {
					content: "";
					width: 0.6rem;
					height: 0.6rem;
					background: url(../../../static/images/play.png) no-repeat;
					background-size: contain;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					z-index: 1;
				}
			}
		}


	}

	.vertical {
		width: 3.33rem;
		height: 4.44rem;

		.image {
			width: 100% !important;
			height: 100% !important;
		}
	}

	.square {
		width: 4.44rem;
		height: 4.44rem;

		.image {
			width: 100% !important;
			height: 100% !important;
		}
	}

	.horizontal {
		width: 6.624000000000001rem;
		height: 3.726rem;

		.image {
			width: 100% !important;
			height: 100% !important
		}
	}

	.showFour {
		width: 4.42rem;
		height: 4.42rem;

		.image {
			width: 49.6% !important;
			height: 49.4% !important;
		}
	}

	.showTwo {
		width: 100%;
		height: 3.33rem;

		.image {
			width: 49.6% !important;
			height: 3.33rem
		}
	}

	.showSix {
		height: 4.42rem;
	}

	.showSix .image:nth-child(-n+3) {
		margin-bottom: .02rem;
	}
</style>